import React, {useEffect, useState} from 'react';
import './index.css'
import email from './image/rightmail.png'
import phone from './image/leftmobile.png'
import http from "../../../util/http";
import {useNavigate} from "react-router-dom";
import more from '../img/more.png'
import {getTermTranslation} from "../../../util/language";
import {useAppContext} from "../../../App";
import icon from "../News/image/icon.svg";

function Notice(props) {
    let navigate = useNavigate();
    const { selectLanguage, setSelectLanguage,setSelectTab } = useAppContext();
    const [data, setData] = useState([]);
    useEffect(() => {
        http.doPost('/doc/getdoc', {category: "229,434", pageSize: 5, pageNum: 1}).then(res => {
            if (res.status === 200) {
                setData(res.data.list)
            }
        })
    }, [])

    function openUrl(docId) {
        if (docId && docId !== "") {
            setSelectTab("通知公告")
            navigate('/portal/details', {
                state: {docId, page: "home", text: ""}
            });
        }
    }
    function toPage(url, page, text, params, event) {
        setSelectTab("通知公告")
        navigate(url, {
            replace: false,
            state: {params, page, text}
        })
        event.stopPropagation();
    }

    return (
        <div className="notice-main">
            <div className="notice-main-up">
                <div className="notice-header">
                    <div className="notice-header-text">
                        <div className="info">{getTermTranslation(selectLanguage,'通知公告')}</div>
                        <div className="more" onClick={(event) => toPage("/portal/basic", "info", getTermTranslation(selectLanguage,'通知公告'), {dirId: "229,434"}, event)}><img src={more}/></div>
                    </div>
                </div>
                <div className="notice-body">
                    {
                        data.map((item, index) => {
                            return (
                                <div className="notice-body-one" key={item.id} onClick={() => openUrl(item.id)}>

                                    <div className="notice-body-one-left">
                                        <div className="timeLine-body-one-icon">
                                            <img src={icon} alt='图标'/>
                                        </div>
                                        <div className="notice-body-one-title"
                                             title={item.docSubject}>{item.docSubject}
                                        </div>
                                    </div>

                                    <div className="notice-body-one-time"
                                         title={item.docCreateDate}>{item.docCreateDate}</div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>

            <div className="notice-main-down">
                <div className="notice-content" id="report" onClick={() => window.open("http://www.mwr.gov.cn/hd/jbts2018/","_blank")}>
                    <div className="notice-content-img">
                        <img src={phone} alt="背景" className="notice-content-img-bg"/>
                        {/*<img src={phone} alt="图标" className="notice-content-img-icon icon-phone"/>*/}
                        <span className="notice-content-text-one text">中央纪委国家监委驻水利部</span>
                        <span className="notice-content-text-tow text">纪检检查组监督举报</span>
                        <span className="notice-content-text-one web">举报网址</span>
                        <span className="notice-content-text-tow exception web">http://www.mwr.gov.cn/hd/jbts2018/</span>
                    </div>
                </div>
                <div className="notice-content">
                    <div className="notice-content-img">
                        <img src={email} alt="背景" className="notice-content-img-bg"/>
                        {/*<img src={email} alt="图标" className="notice-content-img-icon icon-email"/>*/}
                        <span className="notice-content-text-one">信访信箱</span>
                        <span className="notice-content-text-tow exception">xinfang@giwp.org.cn</span>
                    </div>
                </div>
            </div>

        </div>
    );
}

export default Notice;